<template>
  <div class="foodhot-wrapper">
     <div class="serach-wrapper">
        <Input v-model="city_name" placeholder="请输入城市名称" style="width: 200px"></Input>
        <Input v-model="comment_len" placeholder="评论字数最小值" style="width: 100px"></Input>
        <Input v-model="pic_count" placeholder="评论带图数量"style="width: 100px" ></Input>
      <Button @click="getList">开始抓取</Button>
      <Button>暂停</Button>
    </div>
    <div class="data-wrapper">
      <Table border :loading="loading" :columns="columns5" :data="list"></Table>
       <Spin fix v-if="false">
          <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
          <div>Loading</div>
      </Spin>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      city_name: '',
      pic_count:'',
      comment_len:''  ,
      loading:false,
      columns5: [
        {
            title: '店铺名',
            key: 'shopName',
            sortable: true
        },
        {
            title: '上月总评论数',
            key: 'last_month_total_coments_count',
            sortable: true
        },
        {
            title: '上月优质评论数',
            key: 'last_month_quality_coments_count',
            sortable: true
        },
        {
            title: '优上月质评论占比',
            key: 'last_month_rate',
            sortable: true
        },
        {
            title: '本月总评论数',
            key: 'this_month_total_coments_count',
            sortable: true
        },
        {
            title: '本月优质评论数',
            key: 'this_month_quality_coments_count',
            sortable: true
        },
        {
            title: '本月优质评论占比',
            key: 'this_month_rate',
            sortable: true
        },
        {
            title: '涨幅',
            key: 'growth_rate',
            sortable: true
        },
      ],
      list:[],
      total_records:0,
    }
  },
  methods:{
    validate(){
      if (this.city_name === ''){
        this.$Message.warning('请输入城市名称?');
        return false;
      }
      if (this.pic_count === ''){
        this.$Message.warning('请输入图片数量?');
        return false;
      }

      if (this.comment_len === ''){
        this.$Message.warning('请输入评论字数?');
        return false;
      }
      return true;
    },
    getList(){
      if (!this.validate()){
        return;
      }

      let that = this
      that.loading = true;
      console.log('startGet')
      let params = {};
      if (this.city_name !== ''){
        params.city_name = this.city_name;
      }
      if (this.pic_count !== ''){
        params.pic_count = this.pic_count;
      }

      if (this.comment_len !== ''){
        params.comment_len = this.comment_len;
      }
      let url = `http://127.0.0.1:7001/analysis/qualityshopsanalysis`
      console.info(params,'params')
      axios.get(url,{
        params:params
      })
      .then(function (response) {
        that.list = response.data.data;
        that.total_records = that.list.length;
        that.loading = false;
        console.log(that.list)
      })
      .catch(function (error) {
        console.log(error);
      }); 
    }
  }
}
</script>

<style>
  .foodhot-wrapper{
    padding: 20px; 
  }
  .serach-wrapper{
    padding-bottom: 20px;
  }
  .data-wrapper{
    padding-top: 20px;
  }
</style>
